<template>
	<fui-bottom-popup :show="show" @close="closePopup" zIndex="9999">
		<view class="fui-scroll__wrap">
			<view class="fui-title">选择辅助人员</view>
			<fui-search-bar @input="handleInput" @search="handleSearch"></fui-search-bar>
			<scroll-view scroll-y class="fui-scroll__view">
				<fui-list-cell @click="handleSelected(item)" v-for="item in filterList" :key="item.id">
					<text>{{ item.name }}</text>
					<fui-icon v-if="item.id === current" name="check" color="green" size="36"></fui-icon>
				</fui-list-cell>
			</scroll-view>
			<view class="fui-icon__close" @tap="closePopup">
				<fui-icon name="close" :size="48"></fui-icon>
			</view>
		</view>
	</fui-bottom-popup>
</template>

<script setup>
	import { computed, onMounted, ref, watch } from 'vue';
	import { fetchSupportStaff } from '@/common/api/index.js';

	const support_renew_id = defineModel('support_renew_id');
	const support_staff = defineModel('support_staff');
	const show = defineModel('show');

	const list = ref([]);
	const current = ref('');
	const name = ref('');

	function closePopup() {
		show.value = false;
	}

	const filterList = computed(() => {
		return !name.value.trim() ? list.value : list.value.filter((em) => em.name.includes(name.value.trim()));
	});


	async function getSupportStaff() {
		const { success, data } = await fetchSupportStaff();
		if (success) {
			list.value = data;
		}
	}

	const change = (e) => {
		value.value = e.detail.value;
	};

	function handleSelected(item) {
		current.value = item.id;
		support_renew_id.value = item.id;
		support_staff.value = item.name;
		show.value = false;
	}

	const handleSearch = (e) => {
		name.value = e.detail.value;
	};

	const handleInput = (val) => {
		name.value = val;
	};

	onMounted(async () => {
		await getSupportStaff();
		if (support_renew_id.value) {
			if (list.value.length > 0) {
				const obj = list.value.find((em) => em.id === Number(support_renew_id.value));
				if (obj) {
					handleSelected(obj);
				}
			}
		}
	})
</script>

<style lang="scss" scoped>
	.fui-scroll__wrap {
		padding-top: 30rpx;
		position: relative;
	}

	.fui-title {
		font-size: 30rpx;
		font-weight: bold;
		text-align: center;
		padding-bottom: 24rpx;
	}

	.fui-icon__close {
		position: absolute;
		top: 24rpx;
		left: 24rpx;
	}

	.fui-scroll__view {
		width: 100%;
		height: 600rpx;
	}
</style>